import { EllipsisOutlined, LeftOutlined, PlusOutlined } from "@ant-design/icons";
import Popup from "../../components/Popup";
import Button from "../../components/Button";
import { MemberType } from "../../components/Member";
import { useState } from "react";
import { searchMembers } from "../../apis";


export default function Search({open = false, onClose}: {
    open: boolean;
    onClose: () => void;
}) {
    const [members, setMembers] = useState<MemberType[]>([]);
    const [keyword, setKeyword] = useState('');
    const [loading, setLoading] = useState(false);

    const onSearch = () => {
        // if(!keyword) {
        //     return;
        // }
        if(loading) {
            return;
        }
        setLoading(true);
        searchMembers({keyword}).then(response => {
            const {members} = response;
            setMembers(members);
        }).catch(() => {}).finally(() => {
            setLoading(false);
        });
    }

    return <>
        <Popup open={open} closeable={false}>
            <div className="flex flex-col h-screen w-screen bg-gray-100">
                <div className="px-4 h-12 flex items-center justify-between border-b bg-white">
                    <div className="text-xl h-12 flex items-center" onClick={onClose}>
                        <LeftOutlined />
                    </div>
                    <div>查找</div>
                    <div className="text-xl h-12 flex items-center">
                        <EllipsisOutlined />
                    </div>
                </div>
                <div className="flex flex-col gap-4">
                    <div className="flex gap-2 items-center px-4 pt-4">
                        <input
                            className="flex-1 h-9 px-2 border rounded bg-white text-center text-gray-500"
                            placeholder="账号"
                            value={keyword}
                            onChange={(e) => setKeyword(e.target.value)}
                        />
                        <Button
                            className="h-9 w-20 bg-gradient-to-r from-green-500 to-cyan-500 rounded text-white px-4"
                            disabled={loading}
                            loading={loading}
                            onClick={onSearch}
                        >查找</Button>
                    </div>
                    <div className="border-b">
                        {
                            (members || []).map(
                                (member) => <Single key={member.id} member={member} />
                            )
                        }
                    </div>
                </div>
            </div>
        </Popup>
    </>;
}

function Single({member}: {
    member: MemberType;
}) {
    const [loading, setLoading] = useState(false);
    const [already, setAlready] = useState(false);
    const { id, username, avatar } = member;

    const onApply = () => {
        if(loading) {
            return;
        }
        setLoading(true);
        window?.socket?.emit('apply', id);
        setInterval(() => {
            if(localStorage.getItem(`apply-${id}`)) {
                setLoading(false);
                setAlready(true);
                localStorage.removeItem(`apply-${id}`);
            }
        }, 100);
    }

    return <>
        <div className="flex gap-4 p-4 items-center bg-white border-t">
            <div className="flex-1 flex gap-4">
                <div className="w-12 h-12 flex items-center justify-center bg-gray-100 shrink-0">
                    <img src={avatar} alt="user avatar" className="w-full h-full rounded" />
                </div>
                <div className="flex flex-col gap-2">
                    <div className="line-clamp-1">
                        {username}
                    </div>
                    <div className="text-sm text-gray-500">格言：一个和尚挑水喝</div>
                </div>
            </div>
            {
                already
                    ? <div className="text-green-500">已申请</div>
                    : <Button
                        className="h-8 w-24 flex gap-2 items-center justify-center bg-gradient-to-tr from-green-500 to-cyan-500 rounded text-white"
                        loading={loading}
                        disabled={loading}
                        onClick={onApply}
                    ><PlusOutlined />好友</Button>
            }
        </div>
    </>;
}